{% extends 'base.html' %}

{% block title %}Contact | {% endblock title %}

{% block body %}

<!-- ===== Contact Section ===== -->
<section class="contact-section py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center g-4">

      <!-- ===== Left Info Section ===== -->
      <div class="col-lg-5 text-center text-lg-start">
        <h2 class="fw-bold text-success mb-3">
          <i class="bi bi-envelope-paper-heart"></i> Get in Touch
        </h2>
        <p class="text-muted mb-4">
          Have questions or feedback? We’re here to help! Fill out the form, and our team will reach out to you soon.
        </p>

        <ul class="list-unstyled">
          <li class="mb-3">
            <i class="bi bi-geo-alt-fill text-success me-2"></i>
            <span>GreenField Turf, Nanded</span>
          </li>
          <li class="mb-3">
            <i class="bi bi-telephone-fill text-success me-2"></i>
            <span>+91 98765 43210</span>
          </li>
          <li class="mb-3">
            <i class="bi bi-envelope-fill text-success me-2"></i>
            <span>contact@greenfield.com</span>
          </li>
        </ul>
      </div>

      <!-- ===== Contact Form ===== -->
      <div class="col-lg-6">
        <div class="card shadow-lg border-0 rounded-4 p-4">
          <h3 class="text-center text-success fw-bold mb-4">
            <i class="bi bi-chat-dots"></i> Contact Us
          </h3>

          <form method="post" action="/contact_us" class="row g-3">
            {% csrf_token %}

            <div class="form-floating col-12">
              <input type="text" name="name" class="form-control shadow-sm" id="name" placeholder="Enter your name" required>
              <label for="name">Full Name</label>
            </div>

            <div class="form-floating col-12">
              <input type="email" name="email" class="form-control shadow-sm" id="email" placeholder="name@example.com" required>
              <label for="email">Email Address</label>
            </div>

            <div class="form-floating col-12">
              <input type="text" name="phone" class="form-control shadow-sm" id="phone" placeholder="Enter valid mobile number" maxlength="10" required>
              <label for="phone">Phone Number</label>
            </div>

            <div class="form-floating col-12">
              <textarea class="form-control shadow-sm" name="desc" id="desc" placeholder="How can we help you?" style="height: 120px;" required></textarea>
              <label for="desc">How can we help you?</label>
            </div>

            <div class="text-center mt-3">
              <button type="submit" class="btn btn-success px-5 py-2 rounded-pill shadow-sm">
                <i class="bi bi-send-fill"></i> Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .contact-section {
    min-height: 80vh;
  }

  .card {
    border-radius: 20px;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
  }

  .form-control {
    border-radius: 12px;
    border: 1px solid #cfcfcf;
  }

  .form-control:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
  }

  label {
    color: #555;
  }

  .btn-success {
    font-size: 1.1rem;
    font-weight: 600;
  }

  ul li {
    font-size: 1rem;
  }

  @media (max-width: 768px) {
    .contact-section {
      text-align: center;
    }
    ul {
      padding-left: 0;
    }
  }
</style>

{% endblock body %}